<!DOCTYPE html>
<!--
DOM 0 
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            #parent1,#parent2 {
                height: 200px;
                width: 400px;
                background: #8e7;
                margin: 40px;
            }
            #child1,#child2 {
                height: 60px;
                width: 150px;
                background: #843;
                position: relative;
                left:30px;
                top:30px;
            }
        </style>
        <script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function(){
                /*
                 * 当有mouseover的时候 如果从父类移动到子类依然也会得到
                 * 一个父类的mouseout事件 很多时候这种处理是不需要的
                 * 所以在JQuery 中通过mouseenter和mouseleave来替换
                 */
//                $("#parent1").on("mouseover mouseout",function(event) {
//                    print(event.type+","+this.id);
//                });
//                $("#child1").on("mouseover mouseout",function(event) {
//                    print(event.type+","+this.id);
//                });
                //在Jquery中通常建议使用mouseenter和mouseleave来代替mouseover和mouseout
                $("#parent2").on("mouseenter mouseleave",function(event) {
                    print(event.type+","+this.id);
                });
                $("#child2").on("mouseenter mouseleave",function(event) {
                    print(event.type+","+this.id);
                });
                //使用hover可以有效的实现mouseenter和mouseover的轮换
                $("#parent1").hover(function(event) {
                    print(event.type+","+this.id); 
                },function(event){
                    print(event.type+","+this.id);
                });
                $("#child1").hover(function(event) {
                    print(event.type+","+this.id); 
                },function(event){
                    print(event.type+","+this.id);
                });
                
                function print(text) {
                    $("#content").append(text+"</br>");
                }
            });
        </script>
    </head>
    <body id="body">
        <div id="parent1">
            parent1
            <div id="child1">child1</div>
        </div>
        <div id="parent2">
            parent2
            <div id="child2">child1</div>
        </div>
        
        <div id="content"></div>
    </body>
</html>
